<template>
  <div class="divCters">
    <center>
      <el-divider></el-divider>
      <span>商品详情</span>
      <el-divider></el-divider>
      <span v-if="list.comm.spikeString == '秒杀结束'" style="color: red"
        >秒杀结束啦！</span
      >
      <div class="topdic" v-if="list.comm.spikeString != '秒杀结束'">
        <!-- 商品的轮播图 -->
        <div class="block" style="width: 200%">
          <el-carousel :interval="4000" type="card" height="200px" loop>
            <el-carousel-item v-for="(image, o) in list.images" :key="o">
              <img :src="image.imgImage" />
            </el-carousel-item>
          </el-carousel>
          <div class="wzDive">
            <!--  商家信息 -->
            <el-card class="box-card">
              <el-avatar :src="list.merchant.mtShopImage"></el-avatar>
              <br />
              <el-tag style="margin-left: 15%">{{
                list.merchant.mtShopName
              }}</el-tag>
              <el-button style="float: right; padding: 3px 0" type="text"
                >进入店铺</el-button
              >
            </el-card>
            <!--  商品信息  comm-->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-tag>{{ list.comm.cmName }}</el-tag>
                <el-tag type="success">分类:{{ list.sort.stName }}</el-tag>
              </div>
              <div class="text item">
                <el-tag type="info">
                  副标题:
                  {{ list.comm.cmSubtitle }}</el-tag
                >
              </div>
              <el-divider></el-divider>

              <el-tag type="danger">商品价格:{{ list.comm.cmPrice }}</el-tag>
              <el-tag type="success"
                >商品销量:{{ list.comm.cmAmounted }}</el-tag
              >
              <el-tag type="">用户限购数量:{{ list.comm.cmQuota }}</el-tag>
              <el-tag type="warning"
                >商品库存数量:{{ list.comm.cmAmount }}</el-tag
              >
              <br />
              <el-divider>颜色选择</el-divider>
              <!-- 商品的规格参数 -->

              <div>
                <el-radio-group
                  v-model="spees.name"
                  v-for="(spe, index) in list.spes"
                  :key="index"
                  @change="updaye"
                >
                  <el-radio-button :label="spe.stColor"></el-radio-button>
                </el-radio-group>
              </div>

              <el-divider>套餐选择</el-divider>
              <div>
                <el-radio-group
                  v-model="spee.name"
                  v-for="(spe, index) in list.spes"
                  :key="index"
                >
                  <el-radio-button :label="spe.stConfig"></el-radio-button>
                </el-radio-group>
              </div>
              <el-divider>当前价格</el-divider>
              <el-input-number
                v-model="num"
                @change="handleChange"
                :min="1"
                :max="list.comm.cmQuota"
                label="商品数量"
              ></el-input-number>
              <el-tag type="danger" effect="dark">￥:{{ perice }}元</el-tag>
              <el-divider></el-divider>
              <!--  商品介绍 -->
              <el-button
                @click="drawer = true"
                type="primary"
                style="margin-left: 16px"
              >
                查询商品介绍
              </el-button>

              <el-drawer
                title="商品介绍"
                :visible.sync="drawer"
                :with-header="false"
              >
                <div class="text item">
                  <div v-html="list.in.inText"></div>
                </div>
              </el-drawer>
              <el-divider></el-divider>

              <el-button type="primary" @click="Collect">{{
                collectText
              }}</el-button>
              <el-button type="warning" @click="saveShopingCart"
                >加入购物车</el-button
              >
              <el-button type="danger">购买</el-button>
            </el-card>
          </div>
        </div>
      </div>
    </center>
  </div>
</template>

<script>
import comm from "@/api/comm";
import collect from "@/api/collect";
import shopringCart from "@/api/shopringCart";
export default {
  data() {
    return {
      collect: false,
      collectText: "",
      list: [],
      num: 1,
      perice: 0,
      id: 0,
      user: [],
      spee: { name },
      spees: { name },
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      drawer: false,
      drawer: false,
      direction: "rtl", //这里设置抽屉从哪个方向滑出
    };
  },

  methods: {
    //购物车的保存
    saveShopingCart() {
      var shopringCarts = {
        cmId: this.list.comm.cmId,
        scTotal: this.num,
        scTotalPrice: this.perice,
        scColor:this.spees.name,
        scConfig:this.spee.name
      };
      shopringCart.save(shopringCarts).then((res) => {
        this.$message({
          message: "加入购物车成功",
          type: "success",
        });
      });
    },

    //数量计算价格
    handleChange() {
      this.perice = this.list.comm.cmPrice * this.num;
    },

    updaye() {
      console.log(this.spee, this.spees);
    },

    //弹窗提示
    ElementAlert() {
      this.$notify.success({
        title: "提示！",
        message: "欢迎来到商品详情",
        showClose: true,
        duration: 2000,
      });
    },

    //收藏判断
    Collect() {
      if (this.collect) {
        this.deleteScollect();
      } else {
        this.saveCollect();
      }
    },
    //收藏
    saveCollect() {
      var data = { cmId: this.id };
      collect.saveCollect(data).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "收藏成功",
            type: "success",
          });
          this.collectText = "取消收藏";
          this.collect = true;
        } else {
          this.$message.error("收藏失败！");
        }
      });
    },
    //取消收藏
    deleteScollect() {
      collect.deleteScollect(this.id).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "取消收藏成功",
            type: "success",
          });
          this.collectText = "收藏";
          this.collect = false;
        } else {
          this.$message.error("取消收藏失败");
        }
      });
    },

    getList(id) {
      comm.getByID(id).then((res) => {
        this.list = res.data.data;
        //   console.log(this.list);
        this.spee.name = this.list.spes[0].stConfig;
        this.spees.name = this.list.spes[0].stColor;
        this.perice = this.list.comm.cmPrice;
      });

      collect.getCmID(id).then((res) => {
        this.collect = res.data.data.b;
        if (this.collect) {
          this.collectText = "取消收藏";
        } else {
          this.collectText = "收藏";
        }
      });
    },
  },

  created() {
    // 获取网页的id的参数的值
    var id = this.$route.query.id;
    this.id = id;
    this.getList(id);
    this.ElementAlert();
  },
  mounted() {},
};
</script>

<style >
.el-drawer__body {
  overflow: auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  width: 100%;
}
img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
  height: inherit;
}

.topdic {
  float: left;
  display: inline;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.divCters {
  margin-left: 20%;
}
</style>